<template>
  <div class="app-container">
    <h3>编辑货道</h3>
    <el-divider />
    <div class="u-flex u-flex-wrap">
      <el-form
        ref="form"
        :model="form"
        :rules="rules"
        label-width="160px"
      >
      <el-form-item
          label="货道状态"
        >
          <el-radio-group disabled v-model="form.status">
            <el-radio :label="1">
              正常
            </el-radio>
            <el-radio :label="2">
              异常
            </el-radio>
            <el-radio :label="3">
              停用
            </el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item
          label="货道库存"
        >
          <el-input
            disabled
            v-model="form.stock"
            placeholder="请输入货道库存"
          />
        </el-form-item>
        <el-form-item
          label="异常状态说明"
        >
          <el-input
            disabled
            v-model="form.msg"
            placeholder="请输入异常状态说明"
          />
        </el-form-item>
        <el-form-item
          label="适用商品"
          prop="goodsId"
        >
          <el-select
            v-model="form.goodsId"
            filterable
            placeholder="请选择适用商品"
            style="width:100%"
          >
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button
            v-loading="btnLoading"
            type="primary"
            @click="onSubmit('form')"
          >
            提交
          </el-button>
          <el-button @click="$router.go(-1)">取消</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>
<script>
import { saveProductChannelConfig, goodsPage, channelConfigs } from "@/api/user";
import { deepClone } from '@/utils'
export default {
  data() {
    return {
      list: [],
      loading: false,
      btnLoading: false,
      id: '',
      typeStatus: [
        { id: "", name: "不限" },
        { id: 0, name: "商品详情" },
        { id: 1, name: "H5" },
      ],
      form: {
        status: "",
        msg: "",
        stock: "",
        goodsId: ""
      },
      options: [],
      rules: {
        goodsId: [
          { required: false, message: "请选择适用商品", trigger: "change" },
        ],
      },
    };
  },
  created() {
    const { query } = this.$route;
    this.getList()
    this.getMachineList(query.marchineId)
  },
  mounted() {
    const { query } = this.$route;
    if (query.id) {
      this.form = query
    }
  },
  methods: {
    getList() {
      goodsPage({}).then((res) => {
        this.options = res.data && res.data.map(item => {
          return {
            label: item.name,
            value: item.goodsId
          }
        });
      });
    },
    getMachineList(marchineId) {
      channelConfigs(marchineId).then((res) => {
        this.list = res.data;
      });
    },
    onSubmit(formName) {
      this.$refs[formName].validate((valid, b, c) => {
        if (valid) {
          this.btnLoading = true
          const params = {
            marchineId: this.form.marchineId,
            channelsId: this.form.id,
          }
          if (this.form.goodsId) {
            params.goodsId = this.form.goodsId
          }
          saveProductChannelConfig(params).then(() => {
            this.$router.go(-1);
            this.btnLoading = false
          }).catch(err => {
            this.btnLoading = false
          })
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
  },
};
</script>
<style scoped>
.el-form {
  width: 60%;
}
</style>
